import React, { Component } from 'react'
import styled from 'styled-components'
import { connect } from 'react-redux'
import * as actions from '../actionTypes'

import { caesarEscape } from '../utils/helper'
import Modal from './Modal/'
import Flex from '../components/Flex'
import { GradientButton } from '../components/Button'
import LinearGradient from '../components/LinearGradient'
import Icon from '../components/Icon'
import IconInput from '../components/IconInput'
import Text from '../components/Text'
import Color from '../components/Color'

import Logo from '../images/logo1.svg'
import IconClose from '../components/Icon/close.svg'
import IconPhone from '../components/Icon/phone.svg'
import IconPassword from '../components/Icon/unlock.svg'
import IconMsg from '../components/Icon/shield.svg'
// import Svg from '../components/Icon/svg.js'

const LogoIcon = styled(Icon)`
    border-radius: 50%;
`
const LogoIconClose = styled(Icon)`
    border-radius: 50%;
    size:16px;
    float:right;
    width:30px;
    position:absolute;
    top:20px;
    right:10px;
`
const Container = styled(Flex)`
    position: relative;
    width: 390px;
    height: auto;
    background: #fff;
    border-radius: 20px;
    padding: 36px 0 0 0;
    overflow: hidden;
`
const Form = styled(Flex)`
    padding-top: 36px;
`

// const CloseIcons = styled(Svg)`
//     right: 16px;
//     top: 12px;
//     position: absolute;
// `

const FromItem = styled(Flex)`
    position: relative;
    padding-bottom: 20px;
    width: 100%;
`
const Link = styled.a`
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
`


const ToggleBottom = styled(LinearGradient)`
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 100%;
    color: white;
`

const BottomInfo = styled(Flex)`
    padding-bottom: 10px;
    & > a {
        color: ${Color.cyan};
    }
`

class LoginModal extends Component {
    state = {
        isLogin: true,
        mesTime: 60,
        forgetPassWord: false,
        phoneNumber: '',
        password: '',
        mesNumber: '',
    }

    intervalId = null

    componentWillReceiveProps(nextProps) {
        const { isOpen } = this.props.user.loginModal
        const nextIsOpen = nextProps.user.loginModal.isOpen
        // eslint-disable-next-line
        if (isOpen != nextIsOpen) {
            if (nextIsOpen) {
                window.addEventListener(
                    'keydown',
                    this.triggerCommit.bind(this)
                )
            } else {
                window.removeEventListener(
                    'keydown',
                    this.triggerCommit.bind(this)
                )
            }
        }
    }

    triggerCommit(event) {
        // eslint-disable-next-line
        if (event.keyCode == '13') {
            //keyCode=13是回车键
            this.handleCommit()
        }
    }

    toggleForgetPassWord() {
        this.setState({
            forgetPassWord: !this.state.forgetPassWord,
        })
    }

    toggleLogin() {
        this.props.dispatch({
            type: actions.TOGGLE_LOGIN_MODAL,
            payload: {
                isOpen: true,
                isLogin: !this.props.user.loginModal.isLogin,
            },
        })
    }

    handleClickSendMsg() {
        if (this.intervalId) return
        this.props.dispatch({
            type: actions.SEND_SMS,
            payload: {
                phone: this.state.phoneNumber,
            },
        })
        this.intervalId = setInterval(() => {
            let mesTime = this.state.mesTime
            if (this.state.mesTime > 0) {
                this.setState({
                    mesTime: --mesTime,
                })
            } else {
                this.setState({
                    mesTime: 60,
                })
                clearInterval(this.intervalId)
            }
        }, 1000)
    }

    handleClose() {
        this.props.dispatch({
            type: actions.TOGGLE_LOGIN_MODAL,
            payload: {
                isOpen: false,
                isLogin: true,
            },
        })
    }

    handleChangePhone(e) {
        this.setState({
            phoneNumber: e.target.value,
        })
    }

    handleChangeMes(e) {
        this.setState({
            mesNumber: e.target.value,
        })
    }

    handleChangePassword(e) {
        this.setState({
            password: e.target.value,
        })
    }

    handleCommit() {
        const { phoneNumber, password, mesNumber } = this.state
        if (this.props.user.loginModal.isLogin) {
            if (!this.state.forgetPassWord) {
                this.props.dispatch({
                    type: actions.LOGIN_USER,
                    payload: {
                        phone: phoneNumber,
                        userPassword: caesarEscape(password + ''),
                    },
                })
            } else {
                this.props.dispatch({
                    type: actions.PHONE_LOGIN,
                    payload: {
                        phone: phoneNumber,
                        code: mesNumber,
                    },
                })
            }
        } else {
            this.props.dispatch({
                type: actions.REGISTER_USER,
                payload: {
                    phone: phoneNumber,
                    userPassword: caesarEscape(password + ''),
                    code: mesNumber,
                    regChannel: 'web-chuangzuogongfang' // 渠道
                },
            })
        }
    }

    render() {
        const { isOpen, isLogin } = this.props.user.loginModal

        const { forgetPassWord, mesTime } = this.state
        return (
            <Modal isOpen={isOpen}>
                <Container align="center" column="column">
                    {/* <div style="margin-top:20px;float:right"
                        size={16}
                        iconSrc={IconClose}
                        onClick={this.handleClose.bind(this)}
                    >{IconClose}</div> */}
                    <LogoIconClose src={IconClose} size={16} onClick={this.handleClose.bind(this)}/>
                    <LogoIcon  size={100}  src={Logo} />
                    <Form align="center" column="column">
                        <IconInput
                            iconSrc={IconPhone}
                            type="number"
                            placeholder="请输入手机号"
                            inputProps={{
                                onChange: this.handleChangePhone.bind(this),
                            }}
                        />
                        {!isLogin || !forgetPassWord ? (
                            <IconInput
                                iconSrc={IconPassword}
                                type="password"
                                placeholder="请输入密码"
                                inputProps={{
                                    onChange: this.handleChangePassword.bind(
                                        this
                                    )
                                }}
                            />
                        ) : null}
                        {!isLogin || forgetPassWord ? (
                            <IconInput
                                justify="space-between"
                                iconSrc={IconMsg}
                                type="number"
                                placeholder="请输入验证码"
                                inputProps={{
                                    fullWidth: '135px',
                                    onChange: this.handleChangeMes.bind(this),
                                }}
                            >
                                <GradientButton
                                    fullWidth="150px"
                                    fullHeight="38px"
                                    height="40"
                                    hovered
                                    radius="true"
                                    notAllowed={mesTime < 60 ? true : false}
                                    onClick={this.handleClickSendMsg.bind(this)}
                                >
                                    {mesTime < 60
                                        ? mesTime + 's后再获取'
                                        : '获取验证码'}
                                </GradientButton>
                            </IconInput>
                        ) : null}
                        <FromItem justify="flex-end">
                            {isLogin ? (
                                <Link
                                    onClick={this.toggleForgetPassWord.bind(
                                        this
                                    )}
                                >
                                    {forgetPassWord
                                        ? '密码登录？'
                                        : '忘记密码？'}
                                </Link>
                            ) : null}
                        </FromItem>
                        <FromItem>
                            <GradientButton
                                fullWidth="330px"
                                fullHeight="40px"
                                height="40"
                                hovered
                                radius="true"
                                onClick={this.handleCommit.bind(this)}
                            >
                                {isLogin ? '登录' : '注册领取试听课'}
                            </GradientButton>
                        </FromItem>
                    </Form>
                    {isLogin ? null : (
                        <BottomInfo>
                            <Text type="small">继续操作即表明您同意</Text>
                            {/* eslint-disable-next-line */}
                            <Link href="#" target="_blank">
                                《可达鸭用户协议》
                            </Link>
                        </BottomInfo>
                    )}
                    <ToggleBottom isGreen>
                        <Link onClick={this.toggleLogin.bind(this)}>
                            {isLogin
                                ? '没有账号怎么行！点击我免费注册吧~'
                                : '已经有账号啦！点击我赶快登录吧~'}
                        </Link>
                    </ToggleBottom>
                </Container>
            </Modal>
        )
    }
}

export default connect(state => state)(LoginModal)



// WEBPACK FOOTER //
// ./src/containers/LoginModal.js